<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
      @multi-actions="handleMultiActions"
    >
      <template #filter-content style="display: flex; align-items: flex-start">
        <dic-list-select v-model="listQuery.params.msgType" dic-code="msg_type" title="消息类型"/>
        <el-input v-model="listQuery.params.content" style="width:200px" class="filter-item" size="small" placeholder="搜索消息标题或接收人" clearable />

      </template>

      <template #data-columns>

        <el-table-column
          show-tooltip-when-overflow
          label="消息内容"
          align="center"
          prop="content"
        />

        <el-table-column
          label="消息类型"
          align="center"
          prop="msgType_dictText"
          width="100px"
        />

        <el-table-column
          label="发送时间"
          align="center"
          prop="createTime"
          width="180px"
        />

        <el-table-column
          label="接收对象"
          align="center"
        >
          <template v-slot="scope">

            <el-link type="primary" @click="showDetail(scope.row.id, '')"> {{ scope.row.receiver }}</el-link>

          </template>

        </el-table-column>

        <el-table-column
          label="已发送"
          align="center"
          width="100px"
          prop="sendCount" />

        <el-table-column
          label="已读数"
          align="center"
          width="100px">
          <template v-slot="scope">
            <span v-if="scope.row.msgType==1">{{ scope.row.readCount }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column
          label="状态消息"
          show-tooltip-when-overflow
          align="center"
          prop="result"/>

        <el-table-column
          label="状态"
          show-tooltip-when-overflow
          style="width: 120px"
          align="center">
          <template v-slot="scope">
            <el-tag :type="stateFormat(scope.row.sendState)">
              {{ scope.row.sendState_dictText }}
            </el-tag>
          </template>
        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      title="发送明细"
      width="60%"
    >
      <msg-read :msg-id="msgId" :state="readState"/>
    </el-dialog>

    <send-msg-dialog :dialog-show.sync="sendVisible"/>

  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import DicListSelect from '@/components/DicListSelect'
import MsgRead from '@/views/admin/notify/read'
import SendMsgDialog from '@/views/admin/notify/components/SendMsgDialog'
import { triggerSend } from '@/api/notify/msg'

export default {
  components: { SendMsgDialog, MsgRead, DicListSelect, DataTable },
  data() {
    return {

      msgId: '',
      readState: '',
      dialogVisible: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          dateRange: []
        }
      },

      options: {
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/notify/msg/paging',
        add: {
          enable: true,
          permission: ''
        },
        delete: {
          enable: true,
          permission: '',
          url: '/api/notify/msg/delete'
        },
        // 批量操作列表
        multiActions: [
          {
            value: 'trigger',
            label: '重发消息',
            url: '/api/notify/msg/trigger-send',
            permission: ''
          }
        ]
      },

      sendVisible: false,
      timer: null
    }
  },
  watch: {
    sendVisible: {
      handler() {
        // 刷新列表
        this.$refs.pagingTable.getList()
        // 定时刷新
        // this.refresh()
      }
    }
  },

  created() {

  },
  methods: {

    handleAdd() {
      this.sendVisible = true
    },

    // 展示发送详情
    showDetail(msgId, readState) {
      this.readState = readState
      this.msgId = msgId
      this.dialogVisible = true
    },

    stateFormat(state) {
      if (state == 0) {
        return 'info'
      }
      if (state == 1) {
        return 'warning'
      }
      if (state == 2) {
        return 'success'
      }
      if (state == 3) {
        return 'danger'
      }

      return 'default'
    },

    // 刷新消息状态
    refresh() {
      if (this.timer) {
        clearInterval(this.timer)
      }

      this.timer = setInterval(() => {
        this.$refs.pagingTable.getList()
      }, 2000)
    },

    // 重发消息
    reSend(ids) {
      triggerSend({ ids: ids }).then(() => {
        this.$notify({
          title: '成功',
          message: '消息已提交发送！',
          type: 'success',
          duration: 2000
        })
        // 消息
        // this.refresh()
      })
    },

    handleMultiActions(event) {
      if (event.opt === 'trigger') {
        this.reSend(event.ids)
      }
    }
  }
}
</script>
